﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
 String path = request.getContextPath();
 String basePath = request.getScheme() + "://"
         + request.getServerName() + ":" + request.getServerPort()
         + path;
 request.setAttribute("basePath", basePath);
%>
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="Author" contect="http://www.webqin.net">
    <title>瀚海速达</title>
    <base href="${basePath}/staticbefore/">
    <link rel="shortcut icon" href="images/favicon.ico" />
    
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/response.css" rel="stylesheet">
    <link href="css/silde.css" rel="stylesheet">
  </head>
  <body>
    <!--nav/-->
     <c:import url="head.jsp"></c:import>
     <!-- Swiper -->
    <div class="swiper-container" align="center">
        <div class="swiper-wrapper">
        	<div class="swiper-slide"><img src="images/suyun.jpg" /></div>
          <div class="swiper-slide"><img src="images/banner3.jpg" /></div>
          <div class="swiper-slide"><img src="images/banner2.jpg" /></div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <!-- Swiper JS -->
     
     <div class="content">
      <div class="width1003">
       <h2 class="title">速达服务 <span>/Service</span></h2>
       <div class="index-pro">
        <dl>
         <a href="${basePath}/product.action">
          <dt><img src="images/pcon1.png" width="100" height="100" /></dt>
          <dd>
           <h3>快运产品</h3>
           <p>运输快捷，经济实用</p>
          </dd>
         </a>
        </dl>
        <dl>
         <a href="${basePath}/product.action">
          <dt><img src="images/pcon2.png" width="100" height="100" /></dt>
          <dd>
           <h3>定制产品</h3>
           <p>安全保价，放心托运</p>
          </dd>
         </a>
        </dl>
        <dl>
         <a href="${basePath}/product.action">
          <dt><img src="images/pcon3.png" width="100" height="100" /></dt>
          <dd>
           <h3>增值服务</h3>
           <p>运输快捷，经济实用</p>
          </dd>
         </a>
        </dl>
        <dl>
         <a href="${basePath}/product.action">
          <dt><img src="images/pcon4.png" width="100" height="100" /></dt>
          <dd>
           <h3>预约取件</h3>
           <p>专业打包，暖心服务</p>
          </dd>
         </a>
        </dl>
        <dl>
         <a href="${basePath}/product.action">
          <dt><img src="images/pcon5.png" width="100" height="100" /></dt>
          <dd>
           <h3>上门服务</h3>
           <p>定时定点，足不出户</p>
          </dd>
         </a>
        </dl>
        <div class="clearfix"></div>
       </div><!--index-pro/-->
      </div><!--width1003/-->
      <div class="index-search">
       <div class="width1003">
        <h2 class="title">自助查询 <span>/ Self Inquiry</span></h2>
        <div class="index-search-list">
         <div class="isl-box">
          <h2>运单查询</h2>
          <form action="${basePath}/flowbyodd.action" method="post">
           <div class="islinput"><input type="text" name="odd" placeholder="请输入运单号" /></div>
           <div class="islsub"><input type="submit" value="查询" /></div>
          </form>
         </div>
        </div><!--index-search-list/-->
        <div class="index-search-list">
         <div class="isl-box">
          <h2>站点查询</h2>
          <form action="${basePath}/jspafter/sitefind.action" method="get">
           <%--AJAX end--%>
           <div class="islinput">
           	<select id="city" name="cityid" style="margin: auto; width: 100%;height: 35px; border: solid; padding: initial;border-width: 1px;border-color: darkgrey;" >
                      <c:forEach items="${list}" var="cityAddress">
                       <option value="${cityAddress.cityid}">${cityAddress.cityname}</option>
                      </c:forEach>
           	</select>
           </div><br>
           <div class="islinput">
           	<select name="areaid" id="area" style="margin: auto; width: 100%;height: 35px; border: solid;padding: initial;border-width: 1px;border-color: darkgrey;">

           	</select>
           </div><br>
            <div class="islinput">
           	<select name="streetid" id="street" style="margin: auto; width: 100%;height: 35px; border: solid; padding: initial;border-width: 1px;border-color: darkgrey;">

           	</select>
           </div>

            <div class="islsub"><input type="submit" value="查询" /></div>

            <%--AJAX end--%>
          </form>
         </div>
        </div><!--index-search-list/-->
        <div class="index-search-list">
         <div class="isl-box">
          <h2>订单查询</h2>
          <form action="${basePath}/findbyuid.action" method="get">
           <div class="islinput"><input type="text" name="uid" placeholder="请输入用户编号" /></div>
           <div class="islsub"><input type="submit" value="查询" /></div>
          </form>
         </div>
        </div><!--index-search-list/-->
        <div class="clearfix"></div>
       </div><!--index-search/-->
      </div><!--index-search/-->
      <div class="width1003">
       <h2 class="title">公告快讯 <span>/ Announcement</span></h2>
       <div class="index-new">
        <ul class="new fl">
         <li><a href="newinfo.html">习近平会见奥巴马:中美应坚持不冲突不对抗</a><span>2021-10-30</span></li>
         <li><a href="newinfo.html">传统出租公司加速进军专车市场 逆袭</a><span>2021-10-30</span></li>
         <li><a href="newinfo.html">中纪委秒杀8“虎”：从抓到通报最</a><span>2021-10-30</span></li>
         <li><a href="newinfo.html">村民阻运煤专线施工被关铁笼 官方：自</a><span>2021-10-30</span></li>
         <li><a href="newinfo.html">山东邹平工厂煤气泄致17人中毒 目前已</a><span>2021-10-30</span></li>
         <li><a href="newinfo.html">分期乐CEO肖文杰：做理性的创业者绝不</a><span>2021-10-30</span></li>
         <li><a href="newinfo.html">桑兰晒赴美面签申请自证清白 称未申请政治</a><span>2021-10-30</span></li>
        </ul>
        <div class="inde-new-img fr">
         <img src="images/network.gif" />
        </div>
        <div class="clearfix"></div>
       </div><!--index-new/-->
      </div><!--width1003/-->
      <div class="links">
       <div class="width1003">
        <h2 class="title">合作伙伴 <span>/ Partners</span></h2>
        <ul>
         <li><a href="javascript:;"><img src="images/link1.jpg" /></a></li>
         <li><a href="javascript:;"><img src="images/link2.jpg" /></a></li>
         <li><a href="javascript:;"><img src="images/link3.jpg" /></a></li>
         <li><a href="javascript:;"><img src="images/link4.jpg" /></a></li>
         <li><a href="javascript:;"><img src="images/link5.jpg" /></a></li>
         <li><a href="javascript:;"><img src="images/link6.jpg" /></a></li>
         <li><a href="javascript:;"><img src="images/link7.jpg" /></a></li>
         <li><a href="javascript:;"><img src="images/link8.jpg" /></a></li>
         <li><a href="javascript:;"><img src="images/link9.jpg" /></a></li>
         <li><a href="javascript:;"><img src="images/link1.jpg" /></a></li>
         <div class="clearfix"></div>
        </ul>
       </div><!--width1003/-->
      </div><!--links/-->
     </div><!--content/-->
    <c:import url="foot.jsp"></c:import>
     <div class="copy">
		Copyright © 2021 10-31
     </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/style.js"></script>
    <!--焦点轮换-->
	<script src="js/jquery.excoloSlider.js"></script>
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true
    });
    </script>
    <script type="text/javascript">
	 $(function(){
		 //导航定位
		 $(".nav li:eq(0) a:first").addClass("navCur");
		 })
	</script>

    <%--AJAX 开始--%>
    <script>
     $(function () {
      $('#city').change(function () {
       //省份更改后，城市，县城的情况都要被全部更新（先清除，再添加）

       /* $("#area").children().remove();     //去除原来的城市列表

        $("#street").children().remove(); */    //去除原来的县级列表
       var id = this.value;            //获取省份value作为城市的parent_id
       console.log("id"+id);
       var url = '${basePath}/jspafter/jfindbycityid.action';

       $.ajax({                            //jquery ajax
        type: 'post',
        url: url,
        data: {'id': id},

        success: function (data) {

         var cityAddress = JSON.parse(data);
         console.log(cityAddress);
         //为了防止直辖市情况下，change条件无法触发
         $("#area").append("<option value='请选择所在县区'>请选择所在县区</option>");
         for (var i = 0; i < cityAddress.length; i++) {
          /*循环添加所有城市列表*/
          $("#area").append("<option value='" + cityAddress[i].areaid + "'>" + cityAddress[i].areaname + "</option>");
          $("#area").css('display', 'inline');
         }
        }
       });

      });
      /*同上*/
      $('#area').change(function () {
       //城市更改后，更新县级数据

       $("#street").children().remove();

       //这里的value不要和上面的重复，否则变量提升机制会覆盖掉前面的变量值
       var id= this.value;
       console.log("areadid"+id);
       var url = '${basePath}/jspafter/jfindbyareaid.action';

       $.ajax({                            //jquery ajax
        type: 'post',
        url: url,
        data: {'id': id},

        success: function (data) {

         var streetAdderss = JSON.parse(data);
         console.log(streetAdderss);
         //为了防止直辖市情况下，change条件无法触发
         $("#street").append("<option value='请选择所在县区'>请选择所在县区</option>");
         for (var i = 0; i < streetAdderss.length; i++) {
          /*循环添加所有城市列表*/
          $("#street").append("<option value='" + streetAdderss[i].streetid + "'>" + streetAdderss[i].streetname + "</option>");
          $("#street").css('display', 'inline');
         }
        }
       });


      });
     });
    </script>
    <%--AJax end--%>
  <style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
</body>
</html>